<template>
	<view class="container">
		<iceSerch @iceSerchClick="iceSerchClick" />
		<view class="fill"></view>
		<u-collapse accordion v-if="lists.length != 0" @change="collapseChange">
			<!-- <u-collapse-item v-for="(v,k) in lists" :title="`${v.nickname}--【${v.create_time.split(' ')[0]}】`"> -->
			<u-collapse-item v-for="(v,k) in lists" title-border="none" :border="false">
				<template v-slot:title>
					<view class="iceFlexSt">
						<view class="label">
							昵称:
						</view>
						<view class="nickname" :class="{red:!v.nickname??true}">
							{{v.nickname??'未填写'}}
						</view>
						<view class="label">
							提交时间:
						</view>
						<view class="create_time">
							{{v.create_time}}
						</view>
					</view>
				</template>
				<view class="title iceFlex">
					<h2>{{title}}</h2>
					<span class="toDetail" @click="click(v.id)">详情</span>
				</view>
				<view class="grid">
					<!-- 第一行的元素，它会占据整行宽度（因为默认占据一整行） -->
					<view class="grid-item grid-item-first-row">
						<view>
							<h3>{{v.nickname}}</h3>
							<!-- <h3>高艳茹</h3> -->
							<h5 style="color:#ccc">答题人</h5>
						</view>
					</view>
					<!-- 第二行的元素，每个元素会占据一列 -->
					<view class="grid-item grid-item-second-row two">
						<view class="twos">
							<h3>{{v.score_get}}</h3>
							<view class="scoreLine" :style="{transform: `rotate(${angle}deg)`}">
								<image src="../../static/min.png"></image>
								<image src="../../static/max.png"></image>
							</view>
						</view>
					</view>
					<view class="grid-item grid-item-second-row three">
						<h3>{{v.is_qualified ? '及格' :　'不及格'}}</h3>
					</view>
					<view class="grid-item grid-item-second-row four">
						<h3>{{v.correct_question}}</h3>
						<h5 style="color:#ccc">答对</h5>
					</view>
					<view class="grid-item-last grid-item-second-row">总分{{v.score}}分</view>
					<view class="grid-item-last grid-item-second-row">是否及格</view>
					<view class="grid-item-last grid-item-second-row">共{{v.total_question}}题</view>

				</view>
				<!-- <image src="../../static/nodata.png" @click="click(v.id)"></image> -->
			</u-collapse-item>
		</u-collapse>
		<view class="nodata" v-else>
			<image src="../../static/nodata.png"></image>
			<view class="go-1" @click="go_1">返回上一页</view>
		</view>

	</view>
</template>
<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import iceSerch from '../../components/itemNeed/iceSerch.vue';
	import {
		postReadoverAchievement
	} from '../../src/api/prePaper.js';
	import {
		iceMo,
		iceMc
	} from '../../utils/iceMask.js';
	import {
		iceML
	} from '../../utils/iceMaskLoading.js';
	import {
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	const angle = ref(0)
	const collapseChange = () => {
		angle.value = parseInt(Math.random() * 10)
	}
	const lists = ref([])
	const title = ref('')
	const exam_id = ref(0)
	const loadingTitle = ref('')
	const params = reactive({
		exam_id: 0
	})
	const sti = ref(null)
	onLoad((options) => {
		title.value = options.title
		params.exam_id = options.exam_id
		loadingTitle.value = '正在获取列表'
		getList(params)
	})
	const getList = (param) => {
		iceML.o(loadingTitle.value)
		sti.value = setTimeout(() => {
			postReadoverAchievement(param).then(res => {
				lists.value = res.data.data
				clearTimeout(sti.value)
				uni.stopPullDownRefresh();
				iceML.c()
			})
		}, 1000)
	}
	// 下拉刷新
	onPullDownRefresh(() => {
		loadingTitle.value = '正在加载列表'
		getList(params)
	})
	// 关键词搜索
	const iceSerchClick = (e) => {
		loadingTitle.value = `按昵称'${e.keywords}'搜索`
		params.keywords = e.keywords
		getList(params)
	}
	const click = (id) => {
		uni.navigateTo({
			url: `/pages/kaoshiList/resultDetail?id=${id}`
		})
	}
	const go_1 = () => {
		uni.navigateBack({
			data: 1
		})
	}
</script>
<style lang="scss" scoped>
	.container {
		.fill {
			height: 100px;
		}
		.title {
			margin: 10px auto 20px;

			.toDetail {
				font-size: 16px;
				color: $uni-color-primary;
				text-decoration: underline;
				font-style: italic;
			}
		}

		.grid {
			width: 90%;
			margin: 0 auto;
			background-color: #eee;
			padding: 1px;
			display: grid;
			// 定义一个2行的网格  
			grid-template-rows: auto auto;
			// 定义网格的列，因为第一行只需要一列，但第二行需要三列，所以我们定义三列  
			grid-template-columns: repeat(3, 1fr);

			.three {
				text-align: center;
				line-height: 50px;
			}

			.four {
				text-align: center;
				line-height: 50px;
			}

			.two {
				text-align: center;
				line-height: 28px;

				.twos {
					width: 100%;
					height: 50px;
					margin-top: 28px;

					h3 {
						font-size: 50px;
						color: #F50303;
						font-style: italic;
					}
				}

				.scoreLine {
					width: 55px;
					position: relative;
					transform-origin: center;

					image {
						position: absolute;
					}

					image:nth-child(1) {
						left: 36px;
						width: 66%;
						height: 14px;
					}

					image:nth-child(2) {
						top: 5px;
						width: 100%;
						height: 20px;
					}
				}
			}

			// 设置行和列的间隔  
			grid-gap: 1px; // 简写属性，同时设置行和列的间隔 
		}

		// 如果需要，可以为子元素添加额外的样式
		.grid-item {
			// 这里可以添加子元素的样式  
			height: 100px;
			background-color: #fff;
		}

		.grid-item-last {
			text-align: center;
			line-height: 27px;
			background-color: #ddd;
			color: #999;
		}

		// 第一行的子元素（如果需要的话）  
		.grid-item-first-row {
			text-align: center;
			line-height: 24px;

			view {
				width: 80px;
				height: 50px;
				// border:1px red solid;
				margin-top: 12px;
			}

			// 这里可以添加第一行子元素的样式  
			grid-column: 1 / span 3; // 如果需要确保它占据整行宽度（尽管在这种情况下是默认的）  
		}

		// 第二行的子元素（如果需要区分）  
		.grid-item-second-row {
			// 这里可以添加第二行子元素的样式  
		}

		.red {
			color: $uni-color-warning !important;
		}

		.nodata {
			width: 300px;
			margin: 100px auto;

			.go-1 {
				text-align: center;
				color: $uni-color-primary;
				text-decoration: underline;
				font-style: italic;
				font-size: 22px;
			}

			image {
				width: 300px;
				height: 300px;
			}
		}

		.iceFlexSt {
			.label {
				color: #aaa;
			}

			.nickname {
				width: 60px;
				padding-right: 30px;
				color: $uni-color-primary;
				text-indent: 1em;
			}

			.create_time {
				color: $uni-color-error;
				text-indent: 1em;
				font-weight: bold;
			}
		}
	}
</style>